<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box" id="personNumPieChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {rightPieCenter2} from '@/assets/js/centerPhoneImg';

export default {
  name: "personNumPieChart",
  data() {
    return {
      trafficWay: [
        {name: '徐州市',value: 850},
        {name: '常州市',value: 450},
        {name: '苏州市',value: 1050},
        {name: '南通市',value: 700},
        {name: '连云港市',value: 400},
        {name: '淮安市',value: 400},
        {name: '盐城市',value: 600},
        {name: '扬州市',value: 450},
        {name: '镇江市',value: 300},
        {name: '泰州市',value: 400},
        {name: '宿迁市',value: 250},
        {name: '南京市',value: 950},
        {name: '无锡市',value: 650}
      ]
    }
  },
  props: {
    title: {
      type: String,
      default: '各市常住人口比例图'
    }
  },
  mounted() {
    this.initPieChart()
  },
  methods: {
    initPieChart() {
      const leftLenged = []
      const rightLenged = []
      for (let i = 0; i < this.trafficWay.length; i++) {
        if (i <= this.trafficWay.length / 2) {
          leftLenged.push(this.trafficWay[i].name)
        } else {
          rightLenged.push(this.trafficWay[i].name)
        }
      }

      const data = [];
      const color = ['#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#7b2cff', '#fd5151', '#f071ff', '#85f67a', '#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#7b2cff', '#fd5151', '#f071ff']
      for (var i = 0; i < this.trafficWay.length; i++) {
        data.push(
            {
              value: this.trafficWay[i].value,
              name: this.trafficWay[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 8,
                  shadowBlur: 20,
                  borderRadius: 20,
                  borderColor: color[i],
                  shadowColor: color[i]
                }
              }
            },
            {
              value: 8,
              name: '',
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }
        );
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        width: 280,
        height: 252,
        hoverAnimation: false,
        center: ['50%', '50%'],
        left: "center",
        top: 'center',
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          }
        },
        data: data
      }];
      let option = {
        color: color,
        tooltip: {
          show: true,
          formatter: function (param) {
            let html = `<div>${param.marker}<span style="color:#919CA7 ">${param.name}：</span><span style="color:#fff">${(param.value.toFixed(0))}万</span></div>`;
            return html;
          },
          borderRadius: 3,
          backgroundColor: 'rgba(9,29,46,0.35)',
          borderColor: '#1B3C58',
          backdropFilter: 'blur(6px)',
          textStyle: {
            fontSize: 18,
          },
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                width: 46,
                height: 60,
                zIndex: 2,
                top: "center"
              },
              left: 'center',
              top: 'center',
            },
            {
              type: 'image',
              style: {
                image: rightPieCenter2,
                width: 200,
                height: 200,
                zIndex: 1,
                top: "center"
              },
              left: 'center',
              top: 'center',
              originX: 100,
              originY: 100,
              keyframeAnimation: [
                {
                  duration: 200000,
                  loop: true,
                  keyframes: [
                    {
                      percent: 0,
                      rotation: 0
                    },
                    {
                      percent: 1,
                      rotation: -360
                    }
                  ]
                }
              ]
            },
          ],
        },
        legend: [
          {
            x: 'left',
            left: '7%',
            textStyle: {
              rich: {
                name: {
                  color: '#A6B7C2',
                  fontSize: 18,
                  lineHeight: 18,
                },
                percent: {
                  color: '#fff',
                  fontSize: 18,
                  lineHeight: 18,
                },
              },
            },
            orient: 'vertical',
            data: leftLenged,
            top: 'center',
            icon: 'circle',
            itemGap: 30,
            itemHeight: 10,
            itemWidth: 10,
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value ?? 0;
                if (data[i].name === name) {
                  target = data[i].value;
                }
              }
              let html = `  {name|${name.split('').length < 10 ? name : name.split('').slice(0, 10).join('') + '...'}：}{percent|${Math.floor((target / total).toFixed(2) * 100)}%}`;
              var arr = [
                html,
              ];
              return arr.join('\n');
            },
          },
          {
            x: 'right',
            textStyle: {
              rich: {
                name: {
                  color: '#A6B7C2',
                  fontSize: 18,
                  lineHeight: 18,
                },
                percent: {
                  color: '#fff',
                  fontSize: 18,
                  lineHeight: 18,
                },
              },
            },
            orient: 'vertical',
            data: rightLenged,
            top: 'center',
            icon: 'circle',
            itemGap: 30,
            itemHeight: 10,
            itemWidth: 10,
            align: 'left',
            left: '75%',
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value ?? 0;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              let html = `  {name|${name}：}{percent|${Math.floor((target / total).toFixed(2) * 100)}%}`;
              var arr = [html];
              return arr.join('\n');
            },
          },
        ],
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      let myChart = echarts.init(document.getElementById('personNumPieChart'));
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    }
  }
}
</script>
<style scoped lang="scss">
$easeTimer: 1;
@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

.item-title {
  color: white;
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.item-box {
  width: 100%;
  height: 85%;
}

.flex1 {
  flex: 1;
}
</style>